import { useState, useMemo, useEffect, useLayoutEffect } from "react"

const A = props => {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)

  // 假如下面的运算是一个复杂运算，如果不缓存，当状态变了
  // 组件函数会重新执行，重新执行就意味着复杂运算会重新运算
  // useMeme返回计算后的结果
  // 下面的写法，相当于没有写useMemo
  // let total = useMemo(() => {
  //   console.log("重新运算了...");
  //   return (1 + 2 + 3) * num;
  // })

  // []表示任意状态发生变化，都不会重新运算
  // let total = useMemo(() => {
  //   console.log("重新运算了...");
  //   return (1 + 2 + 3) * num;
  // }, [])

  // [num] 只能num发生变化了，才会重新运算
  let total = useMemo(() => {
    console.log("重新运算了...");
    return (1 + 2 + 3) * num;
  }, [num])

  return (
    <div>
      <h2>函数式组件</h2>
      <hr />
      <h3>total:{total}</h3>
      <hr />
      <h3>num:{num}</h3>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <hr />
      <h3>count:{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

export default A;
